<template>
  <div class="box">
        <div class="top">
            <h1>待发货</h1>
            <p>买家已付款，等待卖家发货</p>
        </div>
        <div class="content">
            <!-- 一 -->
            <div class="age-wrap-box add-age">
                <div class="add-age1">
                    <img src="/static/imgs_s05/s05_logo1.png" alt="">
                </div>

                <div class="add-age2">
                    <div class="add-age2-1">
                        <div class="add-age2-1-1">
                            <p>小明<span>15517187268</span></p>
                        </div>
                        <div class="add-age-2-1-2">
                            <span>修改</span><img src="/static/imgs_s05/s05_gd.png" alt="">
                        </div>
                    </div>
                    <div class="add-age2-2">
                        <p>河南省郑州市金水区中州大道农业路苏荷中心</p>
                    </div>
                </div>
            </div>

            <!-- 二 -->
            <div class="age-wrap-box dp-age">
                <div class="dp-age1">
                    <img src="/static/imgs_s05/s05_tx.png" alt="">
                    <span>汇方圆</span>
                </div>
                <div class="dp-age2">
                    <div class="dp-age2-1">
                        <img src="/static/imgs_s05/s05_bz.png" alt="">
                    </div>
                    <div class="dp-age2-2">
                        <div class="dp-age2-2-1">
                            <p>威尔贝鲁 (WELLBRE) 婴儿定型枕新生儿U型枕头 彩棉舒适卡通定型枕</p>
                        </div>
                        
                        <div class="dp-jf">
                            <span class="a11">x1</span>
                            <img src="/static/imgs_s05/s05_logo.png" alt=""><span>300积分</span>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 三 -->
            <div class="age-wrap-box pay-money">
                <div class="pay1">
                    <p>商品总额</p>
                    <p>￥72.90</p>
                </div>
                <div class="pay1 pay2">
                    <p>运费</p>
                    <p>￥0</p>
                </div>
                <div class="pay3">
                    <p>需付款:</p>
                    <p><img src="/static/imgs_s05/s05_logo.png" alt="">
                        <span>300积分</span>
                    </p>
                </div>
            </div>

            <!-- 四 -->
            <div class="age-wrap-box order-age">
                <div>
                    <h1>订单信息</h1>
                    <p>
                        <span>订单编号:</span>
                        <span class="txt">5689789545464</span>
                    </p>
                    <p>
                        <span>下单时间:</span>
                        <span class="txt">20.18-06-08 18:22:06</span>
                    </p>
                    <p>
                        <span>支付方式:</span>
                        <span class="txt">积分支付</span>
                    </p>
                    <p>
                        <span>支付时间:</span>
                        <span class="txt">2018-06-08 18:22:56</span>
                    </p>
                </div>
            </div>

        </div>
        <div class="bottom">
            <div class="bottom1">
                <img src="/static/imgs_s05/s05_xx.png" alt="">
                <p>收藏订单</p>
            </div>
            <div class="bottom2">
                <button>查看物流</button>
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
      
      }
    },

  methods: {
   
  },

  created () {
    // let app = getApp()
  }
}
</script>

<style scoped>
        .box {
            width: 100%;
            background: #CCC;
            /* height: 1000px; */
            display: flex;
            flex-direction: column;
        }

        .top {
            width: 100%;
            height: 169px;
            background: #32B16C;
        }

        .top h1 {
            box-sizing: border-box;
            padding-left: 18px;
            padding-top: 36px;
            font-size: 20px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .top p {
            font-size: 13px;
            box-sizing: border-box;
            padding-left: 18px;
            padding-top: 15px;
            font-weight: 500;
            color: rgba(255, 255, 255, 1);
        }

        .content {
            position: relative;
            top: -44px;
            /* margin: 0 auto; */
        }

        .age-wrap-box {
            background: #FFF;
            border-radius: 9px;
            width: 95%;
            margin: 10px auto;
            height: 120px;
        }

        /* 底栏 */

        /* 修改 */
        .add-age {
            display: flex;
            height: 80px;
            flex-direction: row;
        }

        .add-age1 {
            width: 10%;
            height: 68px;
        }

        .add-age .add-age1 img {
            width: 30px;
            height: 30px;
            margin-left: 13px;
            margin-top: 19px;
        }

        .add-age2 {
            height: 120px;
            width: 80%;
            margin-top: 13px;
            margin-left: 15px;
            display: flex;
            flex-direction: column;
        }

        .add-age2-1 {
            display: flex;
            justify-content: space-between;
            /* margin-left: 10px; */
        }

        .add-age2-1-1 span {
            margin-left: 7px;
            color: #A3A5A8;
        }

        .add-age-2-1-2 img {
            width: 4px;
            height: 8px;
        }

        .add-age2-2 {
            color: #333333;
            margin-top: 6px;
        }

        .add-age-2-1-2 span {
            margin-right: 3px;
            color: #666666;
        }

        /* 商品信息 */
        .dp-age {
            display: flex;
            flex-direction: column;
            height: 150px;
        }

        .dp-age1 {
            width: 100%;
            height: 30px;
            /* margin-top: 3px;
            margin-left: 3px; */
        }

        .dp-age .dp-age1 img {
            margin: 6px 6px 6px 11px;
            width: 30px;
            height: 30px;
        }

        .dp-age .dp-age1 span {
            display: inline-block;
            height: 30px;
            line-height: 30px;
            position: relative;
            top: -17px;
        }

        .dp-age2 {
            margin-left: 13px;
            margin-top: 20px;
            display: flex;
            flex-direction: row;
        }

        .dp-age2-1 img {
            width: 90px;
            height: 83px;
        }

        .dp-age2-2 {
            display: flex;
            flex-direction: column;
        }

        .dp-age2-2-1>p {
            margin-left: 20px;
            display: inline-block;
            width: 218px;
        }

        .dp-age2-2>span {
            margin: 10px 0 8px 20px;
        }
        .dp-jf span {
            color: #32B16C;
        }
        .dp-jf .a11 {
            color: black;
            margin-left: 20px;
        }
        .dp-jf img {
            margin-left: 120px;
            margin-right: 3px;
            width: 12px;
            height: 12px;
        }

        /* 三 */
        .pay-money {
            height: 90px;
            display: flex;
            flex-direction: column;
        }

        .pay1 {
            box-sizing: border-box;
            margin-top: 8px;
            display: flex;
            justify-content: space-between;
        }

        .pay1 p {
            padding-left: 20px;
            width: 30%;
            height: 20px;
            font-size: 13px;
            line-height: 20px;
            /* background: red; */
            text-align: left;
        }

        .pay1 p:nth-child(2) {
            margin-left: 180px;
        }

        .pay3 {
            height: 40px;
            line-height: 40px;
            display: flex;
            justify-content: space-between;
        }

        .pay3 img {
            width: 12px;
            height: 12px;
            margin-right: 3px;
        }

        .pay3 p:nth-child(1) {
            margin-top: 10px;
            font-size: 20px;
            font-weight: bolder;
            padding-left: 20px;
            width: 30%;
            height: 20px;
            font-size: 13px;
            line-height: 20px;
            /* background: red; */
            text-align: left;
        }

        .pay3 p:nth-child(2) {
            font-size: 13px;
            /* margin-left: 150px; */
            /* font-weight: bold; */
            color: #32B16C;
            margin-right: 23px;
        }

        .order-age {
            box-sizing: border-box;
            padding-left: 15px;
            padding-top: 17px;
            height: 190px;
        }

        .order-age h1 {
            /* margin-top: 17px; */
            font-weight: bolder;
            margin-bottom:10px;
        }

        .order-age p{
            margin-bottom:13px;
        
        }
        .order-age .txt{
            margin-left:10px;
        }

        .bottom {
            width: 100%;
            height: 47px;
            background: #FFF;
            position: fixed;
            bottom: 0px;
            display: flex;
            justify-content: space-between;
        }

        .bottom1 {
            color: #BBB;
            margin-left: 20px;
        }

        .bottom1 img {
            margin-left: 15px;
            width: 20px;
            height: 20px;
        }

        .bottom button {
            margin-top: 10px;
            margin-right: 35px;
            display: inline-block;
            width: 69px;
            height: 27px;
            line-height: 27px;
            color: #FFF;
            font-weight: bolder;
            background: rgba(50, 177, 108, 1);
            border-radius: 14px;

        }
    </style>